import React, { useEffect } from 'react';
import {
  View,
  Text,
  FlatList,
  TouchableOpacity,
  StyleSheet,
  Image,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { observer } from 'mobx-react-lite';
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { RootStackParamList } from '@/route/Route';
import { useStore } from '@/route/Route';

type MessageListPageNavigationProp = StackNavigationProp<
  RootStackParamList,
  'MessageList'
>;

export const MessageListPage = observer(() => {
  const navigation = useNavigation<MessageListPageNavigationProp>();
  const { messageStore } = useStore();

  useEffect(() => {
    messageStore.fetchMessages();
  }, []);

  const handleMessagePress = (messageId: string) => {
    navigation.navigate('MessageDetail', { messageId });
  };

  const renderMessageItem = ({ item }: { item: any }) => (
    <TouchableOpacity
      style={[styles.messageItem, !item.isRead && styles.unreadMessage]}
      onPress={() => handleMessagePress(item.id)}
    >
      <View style={styles.messageAvatar}>
        <Ionicons
          name={item.type === 'system' ? 'settings' : 'notifications'}
          size={24}
          color="#0ea5e9"
        />
      </View>
      <View style={styles.messageContent}>
        <View style={styles.messageHeader}>
          <Text style={styles.messageTitle}>{item.title}</Text>
          <Text style={styles.messageTime}>{item.time}</Text>
        </View>
        <Text style={styles.messagePreview} numberOfLines={2}>
          {item.content}
        </Text>
        {!item.isRead && <View style={styles.unreadDot} />}
      </View>
      <Ionicons name="chevron-forward" size={20} color="#cbd5e1" />
    </TouchableOpacity>
  );

  const mockMessages = [
    {
      id: '1',
      title: '系统通知',
      content:
        '欢迎使用 AutoCost！我们为您提供了完整的汽车费用管理功能，帮助您更好地管理车辆支出。',
      time: '2小时前',
      type: 'system',
      isRead: false,
    },
    {
      id: '2',
      title: '费用提醒',
      content: '您的车辆保养时间即将到期，建议及时进行保养以确保车辆安全。',
      time: '1天前',
      type: 'reminder',
      isRead: true,
    },
    {
      id: '3',
      title: '数据同步',
      content: '您的数据已成功同步到云端，可以在其他设备上访问您的费用记录。',
      time: '2天前',
      type: 'system',
      isRead: true,
    },
    {
      id: '4',
      title: '新功能上线',
      content: '我们推出了新的费用分析功能，帮助您更好地了解车辆支出趋势。',
      time: '3天前',
      type: 'system',
      isRead: true,
    },
  ];

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity
          style={styles.backButton}
          onPress={() => navigation.goBack()}
        >
          <Ionicons name="arrow-back" size={24} color="#1e293b" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>消息中心</Text>
        <TouchableOpacity style={styles.markAllButton}>
          <Text style={styles.markAllText}>全部已读</Text>
        </TouchableOpacity>
      </View>

      <FlatList
        data={mockMessages}
        renderItem={renderMessageItem}
        keyExtractor={item => item.id}
        style={styles.messageList}
        showsVerticalScrollIndicator={false}
        ListEmptyComponent={
          <View style={styles.emptyContainer}>
            <Ionicons name="mail-outline" size={64} color="#cbd5e1" />
            <Text style={styles.emptyTitle}>暂无消息</Text>
            <Text style={styles.emptySubtitle}>当有新消息时，会在这里显示</Text>
          </View>
        }
      />
    </SafeAreaView>
  );
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8fafc',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingVertical: 15,
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: '#e2e8f0',
  },
  backButton: {
    padding: 4,
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#1e293b',
  },
  markAllButton: {
    padding: 4,
  },
  markAllText: {
    fontSize: 14,
    color: '#0ea5e9',
    fontWeight: '500',
  },
  messageList: {
    flex: 1,
  },
  messageItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingVertical: 16,
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: '#f1f5f9',
  },
  unreadMessage: {
    backgroundColor: '#f0f9ff',
  },
  messageAvatar: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: '#f0f9ff',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12,
  },
  messageContent: {
    flex: 1,
    marginRight: 12,
  },
  messageHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 4,
  },
  messageTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#1e293b',
    flex: 1,
  },
  messageTime: {
    fontSize: 12,
    color: '#94a3b8',
  },
  messagePreview: {
    fontSize: 14,
    color: '#64748b',
    lineHeight: 20,
  },
  unreadDot: {
    position: 'absolute',
    top: 0,
    right: 0,
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: '#ef4444',
  },
  emptyContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 80,
  },
  emptyTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#64748b',
    marginTop: 16,
    marginBottom: 8,
  },
  emptySubtitle: {
    fontSize: 14,
    color: '#94a3b8',
    textAlign: 'center',
  },
});
